<template>
  <div>
    <sn-row-has-four-col
        v-if="topInfo"
        :one="4"
        :two="4"
        :three="5"
        :four="7"
        class="top-info">
      <div slot="one-col" style="min-height: 36px"></div>
      <!-- 电影海报-->
      <el-image class="poster" slot="two-col" :src="topInfo.poster"/>
      <!-- 基本信息-->
      <div slot="three-col" class="movie-description">
        <!-- 电影名称-->
        <sn-text
            class="margin-bottom"
            :font-size="25"
            font-weight="bold"
            :text="movieInfo.movieName"/>
        <!-- 英文名 -->
        <sn-text
            v-if="movieInfo.movieEnglishName"
            class="margin-bottom"
            :font-size="14"
            :text="movieInfo.movieEnglishName"/>
        <!-- 电影类型-->
        <sn-text
            :font-size="14"
            class="margin-bottom"
            :text="movieInfo.movieType"/>
        <div class="to-flex margin-bottom">
          <!-- 所属国家-->
          <sn-text
              :font-size="14"
              :text="movieInfo.country"/>
          <sn-text
              text="/"
              class="margin-left margin-right"/>
          <!-- 时长-->
          <sn-text
              :font-size="14"
              :text="movieInfo.time"/>
        </div>
        <div class="to-flex">
          <!-- 上映时间 -->
          <sn-text
              :font-size="14"
              class="margin-right"
              :text="movieInfo.showDate"/>
          <sn-text
              :font-size="14"
              :text="movieInfo.movieAreaName"/>
        </div>
        <!-- 想看与评分 按钮-->
        <div class="to-flex user-operation">
          <el-link class="want-see-button" @click="wantToSee" :underline="false">
            <div class="to-flex">
              <el-image class="want-see-icon" :src="wantSeeIcon" v-if="movieInfo.isWantSee"/>
              <el-image class="want-see-icon" :src="notWantSeeIcon" v-else/>
              <sn-text text="想看" class="margin-left" :move-down="1"/>
            </div>
          </el-link>
          <!-- 评分 按钮-->
          <el-link
              @click="toRemark"
              class="score-button"
              :underline="false">
            <div class="to-flex">
              <el-image
                  class="score-icon" :src="notScoreIcon"/>
              <sn-text
                  :move-down="2"
                  text="评分"
                  class="margin-left"/>
            </div>
          </el-link>
        </div>
        <!-- 购票按钮 -->
        <el-button
            @click="toBuyTickets"
            v-if="Number(movieInfo.beOnStatus) === 1"
            class="buy-ticket-button"
            type="danger">
          <sn-text text="特惠购票"/>
        </el-button>
      </div>
      <!-- 其他信息 评分 和票房-->
      <div slot="four-col" class="other-info">
        <!-- 想看数-->
        <div class="margin-bottom" v-if="Number(movieInfo.beOnStatus) === 2">
          <sn-text
              text="想看数"
              font-color="#fff"
              class="margin-bottom"/>
          <div class="to-flex">
            <!-- 想看数 -->
            <sn-text
                :move-down="3"
                :number="Number(movieInfo.expect)"
                class="score margin-right-20"
                :font-size="30"/>
          </div>
        </div>
        <!-- 评分 -->
        <div class="margin-bottom" v-else>
          <sn-text
              text="猫眼口碑"
              font-color="#fff"
              class="margin-bottom"/>
          <div class="to-flex">
            <!-- 评分 -->
            <sn-text
                :move-down="3"
                :number="Number(movieInfo.movieScore)"
                class="score margin-right-20"
                :font-size="30"/>
            <div>
              <el-image :src="scoreIcon" v-for="item in 5" class="score-icon"/>
              <div class="to-flex person-numbers">
                <!-- 评分人数-->
                <sn-text
                    font-color="#fff"
                    :number="Number(movieInfo.movieScorePersonNumbers)"/>
                <sn-text
                    font-color="#fff"
                    :text="movieInfo.movieScorePersonNumbersUnit + '人评分'"/>
              </div>
            </div>
          </div>
        </div>
        <!-- 票房-->
        <div>
          <sn-text text="累计票房" font-color="#fff" class="margin-bottom"/>
          <sn-text
              v-if="Number(movieInfo.beOnStatus) === 2"
              text="暂无"
              :font-size="30"
              font-color="#9B8CB1"
              class="margin-bottom"/>
          <div class="to-flex" v-else>
            <sn-text
                class="margin-right"
                :font-size="30"
                font-color="#fff"
                :number="Number(movieInfo.boxOffice)"/>
            <sn-text :text="movieInfo.boxOfficeUnit" font-color="#fff" :move-down="10"/>
          </div>
        </div>
      </div>
    </sn-row-has-four-col>

    <!-- 评分弹框 -->
    <el-dialog
        title="提示"
        :visible.sync="addRemarkVisible"
        width="30%">
      <el-form
          @submit.native.prevent
          :model="remarkForm"
          :rules="remarkRule"
          ref="remarkForm"
          @keyup.enter.native="submitRemarkForm()"
          label-width="80px">
        <el-form-item label="评分" prop="score">
          <el-input v-model="remarkForm.score" placeholder="评分"/>
        </el-form-item>
        <el-form-item label="评价内容" prop="remark">
          <el-input v-model="remarkForm.remark" placeholder="评价内容"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="addRemarkVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitRemarkForm()">确 定</el-button>
        </span>

    </el-dialog>
  </div>
</template>

<script>

export default {
  name: "topInfo",
  data() {
    return {
      //评分
      remarkForm: {
        score: '',
        remark: ''
      },
      remarkRule: {
        //限制输入数字1-10
        score: [
          {
            validator: (rule, value, callback) => {
              if (value > 10 || value < 0) {
                callback(new Error("请输入1-10的评分"));
              } else {
                callback();
              }
            },
            required: true,
            trigger: 'blur'
          }
        ]
      },
      addRemarkVisible: false,

      wantSeeIcon: require('@/assets/image/movie/wantSee.png'),
      notWantSeeIcon: require('@/assets/image/movie/notWantSee.png'),
      scoreIcon: require('@/assets/image/movie/score.png'),
      notScoreIcon: require('@/assets/image/movie/notScore.png'),
      movieInfo: {
        movieId: '',
        movieName: '',
        movieEnglishName: '',
        movieType: '',
        country: '',
        time: '',
        showDate: '',
        movieAreaName: '',
        isWantSee: '',
        movieScore: '',
        movieScorePersonNumbers: '',
        movieScorePersonNumbersUnit: '',
        boxOffice: '',
        boxOfficeUnit: '',
        beOnStatus: '',
        expect: ''
      }
    }
  },
  props: {
    topInfo: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  methods: {
    //去购票
    toBuyTickets() {
      this.$router.push({
        name: 'cinema'
      })
    },
    //提交表单
    submitRemarkForm() {
      this.$refs['remarkForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: `web/movie/remark/save`,
            method: 'post',
            data: this.$http.adornData({
              "userId": this.$store.state.user.userId,
              "movieId": this.$store.state.movieDetailInfo.movieId,
              "score": this.remarkForm.score,
              "remark": this.remarkForm.remark
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.addRemarkVisible = false
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    //去评分页面
    toRemark() {
      //先判断是否登录
      //测试
      let user = this.$store.state.user.userId
      if (this.$store.state.user.userId === 0) {
        //跳到login页面
        this.myUtils.toLoginMessage(this)
      } else {
        this.addRemarkVisible = true
      }
    },
    //修改想看状态
    wantToSee() {
      //测试
      let user = this.$store.state.user.userId
      //判断下是否登录
      if (user === 0) {
        this.myUtils.toLoginMessage(this)
        //若是已经登录
      } else {
        //想看状态取反
        this.movieInfo.isWantSee = !this.movieInfo.isWantSee
        let isWantSeeNum = 0
        if (this.movieInfo.isWantSee) {
          isWantSeeNum = 1
        }
        this.$http({
          url: '/web/user/expect/save',
          method: 'post',
          data: this.$http.adornData({
            userId: this.$store.state.user.userId,
            movieId: this.movieInfo.movieId,
            expectStatus: isWantSeeNum
          })
        })
      }
    },

    //获取数据
    getTopInfo() {
      let movieTypes = this.topInfo.movieTypes
      let movieType = ''

      for (let i = 0; i < movieTypes.length; i++) {

        movieType += movieTypes[i] + ' '
      }
      this.movieInfo.movieId = this.topInfo.movieId
      this.movieInfo.movieType = movieType
      this.movieInfo.movieName = this.topInfo.movieName
      this.movieInfo.movieEnglishName = this.topInfo.movieEnglishName
      this.movieInfo.country = this.topInfo.country
      this.movieInfo.time = this.topInfo.time
      this.movieInfo.showDate = String(this.topInfo.showDate).split(' ')[0]
      this.movieInfo.movieAreaName = this.topInfo.movieAreaName
      this.movieInfo.isWantSee = this.topInfo.isExpect === 1
      this.movieInfo.expect = this.topInfo.expect
      this.movieInfo.movieScore = this.topInfo.movieScore
      this.movieInfo.beOnStatus = this.topInfo.beOnStatus

      let scorePersonNumbers = Number(this.topInfo.movieScorePersonNumbers)
      if (scorePersonNumbers > 10000) {
        this.movieInfo.movieScorePersonNumbers = (scorePersonNumbers / 10000).toFixed(2)
        this.movieInfo.movieScorePersonNumbersUnit = '万'
      }

      let boxOffice = Number(this.topInfo.boxOffice)
      if (boxOffice >= 100000000) {
        this.movieInfo.boxOffice = (boxOffice / 100000000).toFixed(2)
        this.movieInfo.boxOfficeUnit = '亿'
      } else if (boxOffice < 100000000 && boxOffice >= 10000) {
        this.movieInfo.boxOffice = (boxOffice / 10000).toFixed(2)
        this.movieInfo.boxOfficeUnit = '万'
      }
    }
  },
  created() {
    this.getTopInfo()
  }
}
</script>

<style scoped>
.top-info {
  height: 400px;
  background-color: #756189;
}

.poster {
  height: 350px;
  width: 250px;
  border: 4px solid #fff;
  position: relative;
  top: 70px;
  right: 10px;
}

.movie-description {
  margin-top: 90px;
  color: #fff;
}

.user-operation {
  margin-top: 60px;
}

.want-see-button {

  width: 100px;
  height: 40px;
  background-color: #F6F6F6;
  border-radius: 4px;
  margin-right: 15px;
}

.score-button {
  width: 100px;
  height: 40px;
  background-color: #F6F6F6;
  border-radius: 4px;
}

.want-see-icon {
  width: 20px;
  height: 20px;
}

.score-icon {
  width: 20px;
  height: 20px;
}

.buy-ticket-button {
  width: 215px;
  height: 40px;
  margin-top: 10px;
}

.el-link.el-link--default:hover {
  color: #606266;
}

.other-info {
  margin-top: 248px;
}

.score {
  font-weight: bold;
  color: #FFC624;
}

.person-numbers {
  margin-left: 3px;
}

.fr {
  float: left;
}

.center {
  text-align: center;
}

.center_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

.pop {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.3;
}

.box {
  color: #333;
  background: #fff;
  padding: 27px 70px;
  border-radius: 20px;
}

.title {
  font-size: 24px;
}

.s {

  display: inline-block;
  width: 35px;
  height: 35px;
  margin-right: 10px;
  background: url('') no-repeat center center;
  background-size: cover;
  cursor: pointer;
}

.active {
  background-image: url('');
}

.s5 {
  font-size: 24px;
}

textarea {
  width: 370px;
  height: 140px;
  padding: 19px;
  border: 1px solid #cccccc;
  border-radius: 20px;
}

</style>
